<template>
  <div class="main">
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="订单信息"
      size="60%"
      :with-header="false"
      :visible.sync="detaildialog"
      :show-close="true"
      @close="addressClose"
    >
      <div style="position: relative">
        <div class="drawerTitle">
          <span>批量发货</span>
          <div class="close" @click="addressClose">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <div class="reminder">
        <p class="alert-p">说明：需要先将待发货的订单进行表格导出，导出后可以在表格中按照对应的字段填写快递单号！</p>
        <p class="alert-p">如重复提交同批次的订单快递号系统则忽略，则以第一次为主！</p>
        <!-- <p class="alert-p">如果快递单号上传错误，可以使用[更新快递]功能进行更新快递单号</p> -->
      </div>
      <div class="box-upload">
        <el-upload
          ref="refUpload"
          class="upload-demo"
          drag
          :limit="uploadLimit"
          :action="uploadAction"
          :headers="uploadHeaders"
          multiple
          :before-upload="beforeUpload"
          :on-success="uploadSuccess"
          :on-remove="onRemove"
          :on-exceed="onExceed"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>

      <div class="box-batch">
        <p>已解析出：{{ total }}条</p>
        <el-button type="primary" size="mini" :disabled="disabled" :loading="loading" @click="batchSend">批量发送</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { uploadURL } from '@/api/admin/common'
import { getAdminToken } from '@/utils/auth'
import { supplyOrderImport } from '@/api/order/index'
export default {
  data() {
    return {
      detaildialog: false,
      loading: false,
      uploadAction: uploadURL(),
      uploadHeaders: { AdminToken: getAdminToken() },
      uploadLimit: 1,
      total: 0,
      form: {
        filed: '',
        steps: 1
      }
    }
  },
  computed: {
    disabled: function() {
      if (this.total === 0) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
  },
  methods: {
    getRemove() {
      this.form.filed = ''
      this.form.steps = 1
      this.total = 0
      this.$refs.refUpload && this.$refs.refUpload.clearFiles()
    },
    open() {
      this.getRemove()
      this.detaildialog = true
    },
    addressClose() {
      this.getRemove()
      this.detaildialog = false
    },
    uploadSuccess(res, file) {
      this.form.filed = file.raw || ''
      supplyOrderImport(this.form).then(res => {
        if (res.code === 200) {
          this.total = res.data.total
        }
      }).finally(() => {
      })
      console.log(this.form)
    },
    uploadExceed() {
      this.$messages.error(`每次最多选择 ${this.uploadLimit} 个文件`)
    },
    onRemove(file) {
      console.log(file, '移除时的钩子')
      this.getRemove()
    },
    onExceed(file) {
      this.$messages.error(`每次最多上传 ${this.uploadLimit} 个文件`)
    },
    // 限制格式
    beforeUpload(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.'))
      if (fileType !== '.xlsx') {
        this.$messages.error(`请上传xlsx文件`)
        return false
      }
      return true
    },
    batchSend() {
      this.loading = true
      this.form.steps = 2
      supplyOrderImport(this.form).then(res => {
        if (res.code === 200) {
          this.$messages.success(res.data)
          this.total = 0
          this.$refs.refUpload.clearFiles()
          this.$emit('getListWay')
        }
      }).finally(() => {
        this.getRemove()
        this.loading = false
      })
    }
  }

}
</script>
<style scoped lang="scss">
  .main{
    position: relative;

  }
  .reminder{
    width: 96%;
    margin: 20px auto;
    border-radius: 10px;
    padding: 10px;
    background-color: #b4dbff;
    p{
      color: black;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .box-upload,.box-batch{
    width: 360px;
    margin: 0 auto;
  }
  .box-batch{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
  }
</style>
